<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../resources/cola-ui/cola.css">
	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
	<title>Carousel</title>
	<script src="../resources/jquery-2.1.3.js"></script>
	<script src="../resources/cola-ui/3rd.js"></script>
	<script src="../resources/cola-ui/semantic.js"></script>
	<script src="../resources/cola-ui/cola.js"></script>
	<script src="../resources/cola-ui/i18n/zh/cola.js"></script>
	<script type="text/javascript">
		cola(function (model) {
//			model.set("movies", [
//				{image: "../resources/images/movie-1.jpg"},
//				{image: "../resources/images/movie-2.jpg"},
//				{image: "../resources/images/movie-3.jpg"},
//				{image: "../resources/images/movie-4.jpg"},
//				{image: "../resources/images/movie-5.jpg"}
//			])

		});
	</script>
</head>
<body style="padding: 1em">


<div c-widget="Carousel; height:200">
	<div class="items-wrap">
		<div><img c-widget="image; src:../resources/images/movie-1.jpg; class:centered fluid;">
		</div>
		<div><img c-widget="image; src:../resources/images/movie-2.jpg; class:centered fluid;">
		</div>
		<div><img c-widget="image; src:../resources/images/movie-3.jpg; class:centered fluid;">
		</div>
		<div><img c-widget="image; src:../resources/images/movie-4.jpg; class:centered fluid;">
		</div>
		<div><img c-widget="image; src:../resources/images/movie-5.jpg; class:centered fluid;">
		</div>
	</div>
</div>
<div class="ui divider"></div>

<!--<div c-widget="Carousel; bind:item in movies; height:300;">-->
<!--<template>-->
<!--<img c-widget="image; src:{{item.image}};"/>-->
<!--</template>-->
<!--</div>-->
</body>
</html>
